<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Keywords" content="">
    <meta name="description" content="">
    <title>  </title>
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
    <link href="http://www.builive.com/apps/default/assets/css/main.css" rel="stylesheet" type="text/css" />
    <link href="css/global.css" rel="stylesheet">
</head>
<body>
    <div class="ws-qrfh">
        <span class="ws-qrfh-tit">配送员：</span>
        <input id="deverid" type="text" name="" value="">
        <button id="addItem" type="button" class="button">确认</button>
        <span class="ws-qrfh-tit" style="margin-left: 20px;">订单号：</span>
        <input type="text"  id="orderid" name="" value="">
        <button id="search" type="button" class="button">确认</button>
        <table class="ws-table" border=1 style="margin-top:30px;">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="selectAll" name="" value="">
                    </th>
                    <th>
                        订单号
                    </th>
                    <th>
                        送货地址
                    </th>
                    <th>
                        送货人电话
                    </th>
                    <th>
                        金额
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
            </thead>
            <tbody data-role="tbody">
                <tr>
                    <td>
                        <input type="checkbox" name="" value="">
                    </td>
                    <td>
                        1234
                    </td>
                    <td>
                        汕头市
                    </td>
                    <td>
                        13824474673
                    </td>
                    <td>
                        100
                    </td>
                    <td>
                        <span class="ico-del"></span>
                        <span class="reset">还原</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" value="">
                    </td>
                    <td>
                        123
                    </td>
                    <td>
                        汕头市
                    </td>
                    <td>
                        13824474673
                    </td>
                    <td>
                        100
                    </td>
                    <td>
                        <span class="ico-del"></span>
                        <span class="reset">还原</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" value="">
                    </td>
                    <td>
                        456
                    </td>
                    <td>
                        汕头市
                    </td>
                    <td>
                        13824474673
                    </td>
                    <td>
                        100
                    </td>
                    <td>
                        <span class="ico-del"></span>
                        <span class="reset">还原</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" value="">
                    </td>
                    <td>
                        789
                    </td>
                    <td>
                        汕头市
                    </td>
                    <td>
                        13824474673
                    </td>
                    <td>
                        100
                    </td>
                    <td>
                        <span class="ico-del"></span>
                        <span class="reset">还原</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" value="">
                    </td>
                    <td>
                        453
                    </td>
                    <td>
                        汕头市
                    </td>
                    <td>
                        13824474673
                    </td>
                    <td>
                        100
                    </td>
                    <td>
                        <span class="ico-del"></span>
                        <span class="reset">还原</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" value="">
                    </td>
                    <td>
                        123
                    </td>
                    <td>
                        汕头市
                    </td>
                    <td>
                        13824474673
                    </td>
                    <td>
                        100
                    </td>
                    <td>
                        <span class="ico-del"></span>
                        <span class="reset">还原</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" value="">
                    </td>
                    <td>
                        987
                    </td>
                    <td>
                        汕头市
                    </td>
                    <td>
                        13824474673
                    </td>
                    <td>
                        100
                    </td>
                    <td>
                        <span class="ico-del"></span>
                        <span class="reset">还原</span>
                    </td>
                </tr>
            </tbody>
        </table>
        <button  type="button" class="button" style="display:block;margin: 30px auto;">确认</button>
    </div>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/bui-min.js"></script>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/config-min.js"></script>
    <script type="text/javascript">
    $(function() {
        $(document).on('click', '.ico-del', function() {
            $(this).closest('tr').remove();
        })

        $(document).on('click', '#selectAll', function() {
            if($(this).prop('checked')) {
                $('input[type="checkbox"]').attr("checked",true);
                $(this).attr("checked",true);
            } else {
                $('input[type="checkbox"]').attr("checked",false);
                $(this).attr("checked",false);
            }
        })


        $(document).on('click', '#addItem', function() {
            var input = $('#deverid').val();
            if(input == '') {
                alert('配送员不能为空！')
            } else {
                // 你的数据获取之后放在这里
            }
        })

        $(document).on('click', '#search', function() {
            var input = $('#orderid').val();
            if(input == '') {
                alert('订单号不能为空！')
            } else {
                $.each($('[data-role="tbody"] tr'), function(index, item) {
                    var id = $(item).find('td').eq(1).html();
                    if(id.indexOf(input) != -1) {
                        $(item).css('backgroundColor', 'rgb(255, 235, 59)');
                        $(item).find('td').eq(0).find('input').prop('checked', true);
                    }
                })
            }
        })

        //还原
        $(document).on('click', '.reset', function() {
            $(this).closest('tr').css('backgroundColor', '#fff').find('td').eq(0).find('input').prop('checked', false);
        })
    })
    </script>
</body>

</html>
